<template>
    <van-popup
        v-model="mychannelcons.channelshow"
        position="bottom"
        close-icon-position="top-right"
        :style="{ height:'100%' }"
        closeable
    >
      <div  class="mychannels">
        <van-cell title="我的频道" class="lei" title-style="line-height:1rem">
          <span slot="label">点击进入我的频道</span>
          <van-button slot="default" class="editbtn" type="danger" size="mini" @click="isedit=!isedit" :plain="!isedit" round > {{isedit?'完成':'编辑'}} </van-button>
        </van-cell>
        <van-grid :column-num="4" class="pinlist" :gutter="10">
          <van-grid-item v-for="(item,index) in mychannelcons.mychannellist" @click="gochannel(index)" :key='index' :class="index==mychannelcons.active?'itembtncolor on':'itembtncolor'"  :text="item.name" >
            <van-icon class="closeico" v-show="index>0&&isedit" @click.stop="delchannel(mychannelcons.mychannellist,index)" style="" slot="icon"  name="clear" color="red"></van-icon>
          </van-grid-item>
        </van-grid>
      </div>
      <div slot="" class="allchannels">
        <van-cell title="推荐频道" class="lei" title-style="line-height:1rem" >
           <span slot="label">点击添加我的频道</span>
        </van-cell>
        <van-grid :column-num="4" class="pinlist" :gutter="10">
          <van-grid-item v-for="(item,index) in allchannels" @click="addchannel(item)" :key='index' class="itembtncolor"  :text="item.name"/>
        </van-grid>
      </div>
    </van-popup>

</template>

<script>
import {deluserchannel,adduserchannel} from '@/api/article.js' 
import {setItem,getItem} from '@/utils/localfun.js'
import { mapState } from 'vuex';
export default {
  name:'Mypin',
  components: {},
  props: {
    mychannelcons:{
        required:true,
        type:Object
    }
  },
  data() {
    return {
      isedit:false
    };
  },
  watch: {
    
  },
  computed: {
    ...mapState(['logintoken']),
    allchannels:function(){
      var allchannels=[]
      this.mychannelcons.channellist.forEach(item=>{
        let ret=this.mychannelcons.mychannellist.find(myitem=>{
          return item.id===myitem.id
        })
        if(!ret){
          allchannels.push(item)
        }
      })
      return allchannels
    }
  },
  methods: {
    gochannel(index){
      this.mychannelcons.channelshow=false
      this.$emit('chactivetab',index)
    },
    async delchannel(mychannellist,index){
      console.log(this.isedit)
      if(this.isedit){
        if(index<this.mychannelcons.active){
          this.$emit('chactivetab',this.mychannelcons.active-1)
        }
      }else{
        return
      }
      this.mychannelcons.mychannellist.splice(index,1)
      if(this.logintoken){
        //已登陆
        await deluserchannel(this.mychannelcons.mychannellist[index].id)
      }else{
        //未登录
        setItem('MYCHANNEL',this.mychannelcons.mychannellist)
      }
      
    },
    async addchannel(item){
      this.mychannelcons.mychannellist.push(item)
      if(this.logintoken){
        //已登陆操作
        await adduserchannel({
          id:item.id,
          seq:this.mychannelcons.mychannellist.length
        })
      }else{
        //未登陆操作
        setItem('MYCHANNEL',this.mychannelcons.mychannellist)
      }
    },
  },
  created() {console.log(this.mychannelcons.active)},
  mounted() {
    
  }
};
</script>
<style lang="less" scoped>
.pinlist{
  padding:10px 15px;
  padding-right:0;
  width:100%;
  margin: 20px 0;
  box-sizing: border-box;
  padding-bottom:0; 
  /deep/.van-grid-item__content--center{
      background:rgb(246, 246, 246);
      padding: 20px;
      height: auto;
      .van-grid-item__text{
        color: #999999 !important;
        padding:0;
      }
  }
  .itembtncolor{
    color:#999999 !important;
    text-align: center;
    margin-left:0px;
    position: relative;
    /deep/.van-grid-item__icon-wrapper{
      width:100%;
    }
    .closeico{
      font-size:30px;
      position: absolute;
      top:-30px;
      right:-30px;
    } 
    
  }
  /deep/.itembtncolor.on .van-grid-item__text{
    color:#ee0a24 !important;
  }
  
}
.allchannels{
  line-height: 30px;
  .van-cell__title{
    display: flex;
    font-size: 35px;
    align-items: center;
    .van-cell__label{
      padding-bottom: 8px;
      margin-left: 10px;
    }
  }
  
  .editbtn{
    padding: 15px 25px !important;
    margin-top: 8px;
  }
  
   .itembtncolor{
    color:#999999 !important;
    width:150px;
    text-align: center;
    margin-bottom:25px;
    position: relative;
  }
}
.mychannels{
  padding-top:90px;
  line-height: 30px;
  .van-cell__title{
    display: flex;
    font-size: 35px;
    align-items: center;
    .van-cell__label{
      padding-bottom: 8px;
      margin-left: 10px;
    }
  }
  .editbtn{
    padding: 15px 25px !important;
    margin-top: 8px;
  }
  
}
.lei.van-cell{
  vertical-align: middle;
  padding:15px 20px;
  box-sizing: border-box;
}
.van-popup__close-icon{
  font-size:14px
}
</style>